<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/bootstrap-dropdown.js"></script>
	<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
	<!--[if IE]>
	  <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
	<![endif]-->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
	<link href="../css/application-766336123a9b61bedf26182718c02860.css" media="all" rel="stylesheet" type="text/css">
	<script type="text/javascript" async="" src="../js/ga.js"></script><script src="../js/application-e8369d8531953caeeedd0118548cdc1c.js" type="text/javascript"></script>
	<style type="text/css">
		body{
			margin-top:0px;
		}
		input,
		.page-header{
			background-color:rgb(240, 245, 248);
		}
		
		#beijing{
			width:400px;
			height:100px;
		}
		
		#telsort{
			display : inline;
		}
	</style>
	
</head>
<body>
	<div class="navbar navbar-fixed-top">
	  <div class="navbar-inner">
		<div class="container">
			<a class="brand" href="#">
			  <img src="../img/workxp-logo-68b281b82e899ff436ecf42ebcc1bc58.png" alt="" />&nbsp;
			</a>
			<ul class="nav">
			  <li>
				<a href="../main.action">最新动态</a>
			  </li>
			  <li><a href="list.action">联系人</a></li>
			  <li><a href="../task/task.action">任务</a></li>
			  <li><a href="../deal/list.action">机会</a></li>
			 
			  <li class="dropdown" id="menutest1">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1">
				  添加
				  <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
				  <li><a href="addcontact.action"><i class="icon-user"></i>&nbsp;联系人</a></li>
				  <li><a href="addcompany.action"><i class="icon-home"></i>&nbsp;公司</a></li>
				  <li class="divider"></li>
				  <li><a href="../task/addtask.action"><i class="icon-ok"></i>&nbsp;任务</a></li>
				  <li><a href="../deal/adddeal.action"><i class="icon-star-empty"></i>&nbsp;机会</a></li>
				</ul>
			  </li>
			  
			</ul>
			
			<ul class="nav pull-right" >
			  <li>
				<a href="#">${user.username }</a>
			  </li>
			  <li class="dropdown" id="menutest2">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#menutest2">
				  管理
				  <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
				   <li><a href="manage_user.action?id=${sessionScope.user.id }"><i class="icon-user"></i>&nbsp;同事</a></li>
				  <li><a href="manage_group.action"><i class="icon-list-alt"></i>&nbsp;组</a></li>
				  <li class="divider"></li>
				<!--  <li><a href="user_update_user.action?id=${sessionScope.user.id }"><i class="icon-asterisk"></i>&nbsp;账号</a></li> -->
				  <li><a href="show_user_msg.action?id=${sessionScope.user.id }"><i class="icon-asterisk"></i>&nbsp;账号</a></li>
				</ul>
			  </li>
			  <li class="divider-vertical"></li>
			  <li><a href="../logout.action">退出</a></li>
			</ul>
			
		</div>
	  </div>
	</div>
	
  
  <div class="container">
		
			<div class="row">
				  <div class="span2"></div>
				  <div class="span8">
					
						<div class="page-header well">
							<c:choose>
									<c:when test="${contact.name != null }">
									  <h2><img src="../img/contact_list.png" alt="" />&nbsp;修改${contact.name }的信息</h2>	
									</c:when>
									<c:when test="${contacts.name == null }">
									  <h2><img src="../img/contact_list.png" alt="" />&nbsp;修改${contact.companyname }的信息</h2>	
									</c:when>
								</c:choose>
						</div>	
						
	<div class="page-header well">
		<form id="myform" class="form-horizontal"  action="updatecontact.action?id=${contact.id }"  method="post" >
		  <fieldset>
			<legend>完善资料</legend>
			
			<c:choose>
				<c:when test="${contacts.name != null }">
						<div class="control-group">
						  <label class="control-label">姓名</label>
						  <div class="controls">
							<input type="text" name="contact.name" value="${contact.name}" style="height:30px;">
						  </div>
						</div>
						
						<div class="control-group">
						  <label class="control-label">公司</label>
						  <div class="controls">
							<input type="text" name="contact.companyname" value="${ contact.companyname}">
						  </div>
						</div>
				</c:when>
				<c:when test="${contacts.name == null }">
						<div class="control-group">
						  <label class="control-label">公司名</label>
						  <div class="controls">
							<input type="text" name="contact.companyname"  value="${ contact.companyname}">
						  </div>
						</div>
				</c:when>
			</c:choose>
			
			
			
			<div class="control-group string optional marco_polo_container">
				<label for="person_phone" class="string optional control-label"> 电话</label>
				<div class="controls">
					<div  id="contact_phone_list_company">
							<div style="" class="contact_methods"></div>
							<div class="addphone" ><a href="javascript:;">添加一个电话...</a></div>
							
										<div id="tellist" style="" class="contact_methods">
							<c:forEach items="${contact.telSet }" var="tellist">
										<div >
												<input type="text" value="${tellist.tel }"  size="30" name="tel" id="tel" >
													<select display="inline" name="teltype" id="telsort" style="width:90px; margin-left:-4px" >
													<option value="公司">${tellist.type }</option>
													<option value="公司">公司</option>
													<option value="工作">工作</option>
													<option value="手机">手机</option>
													<option value="传真">传真</option>
													<option value="住宅">住宅</option>
													<option value="其它">其它</option>
												</select>
												<span>&nbsp;&nbsp;<a class='oldtelremove'  href='javascript:;' ><img style='width:25px' src='img/clear.png'/></a></span>
											</div>
								</c:forEach>
									</div>
							
							
							
					</div>
				</div>
			</div>
			
			
			  <div class="control-group string optional marco_polo_container">
				<label for="person_phone" class="string optional control-label">邮箱</label>
				<div class="controls">
					<div  id="addemail">
							<div style="" class="contact_methods"></div>
							<div class="addemail" ><a href="javascript:;">添加一个邮箱...</a></div>
							
										<div  id="maillist" style="" class="contact_methods">
								<c:forEach items="${contact.emailSet }" var="maillist">
										<div>
										<input type="text" value="${maillist.email }"  size="30" name="email" id="tel" >
											<select display="inline" name="emailtype" id="telsort" style='width:90px; margin-left:-4px' >
												<option value="公司">${maillist.type }</option>
												<option value="公司">公司</option>
												<option value="工作">工作</option>
												<option value="手机">手机</option>
												<option value="传真">传真</option>
												<option value="住宅">住宅</option>
												<option value="其它">其它</option>
											</select>
											<span>&nbsp;&nbsp;<a class='oldmailremove'  href='javascript:;' ><img style='width:25px' src='img/clear.png'/></a></span>
											</div>
								</c:forEach>
									</div>
							
					</div>
				</div>
			</div>
			
			
			<div class="control-group string optional marco_polo_container">
				<label for="person_phone" class="string optional control-label">IM</label>
				<div class="controls">
					<div  id="addim">
							<div style="" class="contact_methods"></div>
							<div class="addim" ><a href="javascript:;">添加一个即时聊天工具...</a></div>
							
									<div  id="imlist"  style="" class="contact_methods">
									<c:forEach items="${contact.imSet}" var="maillist">
									<div>
										<input type="text" value="${maillist.im }"  size="30" name="im" id="tel" >
											<select display="inline" name="imtype" id="telsort" style='width:90px; margin-left:-4px' >
												<option value="公司">${maillist.type }</option>
												<option value="公司">公司</option>
												<option value="工作">工作</option>
												<option value="手机">手机</option>
												<option value="传真">传真</option>
												<option value="住宅">住宅</option>
												<option value="其它">其它</option>
											</select>
											<span>&nbsp;&nbsp;<a class='oldimremove'  href='javascript:;' ><img style='width:25px' src='img/clear.png'/></a></span>
											</div>
								</c:forEach>
								</div>
							
					</div>
				</div>
			</div>
			
			
			<div class="control-group string optional marco_polo_container">
				<label for="person_phone" class="string optional control-label">网址</label>
				<div class="controls">
					<div  id="addwebsite">
							<div style="" class="contact_methods"></div>
							<div class="addwebsite" ><a href="javascript:;">添加一个网址...</a></div>
							
								<div  id="websitelist" style="" class="contact_methods">
							<c:forEach items="${contact.websiteSet }" var="maillist">
										<div>
										<input type="text" value="${maillist.website }"  size="30" name="website" id="tel" >
											<select display="inline" name="websitetype" id="telsort" style='width:90px; margin-left:-4px' >
												<option value="公司">${maillist.type }</option>
												<option value="公司">公司</option>
												<option value="工作">工作</option>
												<option value="手机">手机</option>
												<option value="传真">传真</option>
												<option value="住宅">住宅</option>
												<option value="其它">其它</option>
											</select>
											<span>&nbsp;&nbsp;<a class='oldwebsiteremove'  href='javascript:;' ><img style='width:25px' src='img/clear.png'/></a></span>
										</div>				
								</c:forEach>
									</div>
							
					</div>
				</div>
			</div>
			
			
			<div class="control-group">
			  <label class="control-label">地址</label>
			  <div class="controls">
				<input type="text" name="contact.address" value="${contact.address }">
			  </div>
			</div>
			
			
			<div class="control-group">
			  <label class="control-label">新浪微博</label>
			  <div class="controls">
				<input type="text" name="contact.weibo"   value="${contact.weibo }">
				 <p >输入微博名称或ID</p>
			  </div> 
			</div>
			<div class="control-group">
			  <label class="control-label">背景信息</label>
			  <div class="controls">
				<textarea name="contact.content" id="beijing" rows="20"cols="40">${contact.content }</textarea>
				 <p >简介，如何认识的等</p>
			  </div> 
			</div>
			<div class="control-group">
			  <label class="control-label">谁可以看见？</label>
			  <div class="controls">
					
				<c:choose>
					<c:when test="${contact.view == 'all' }">
						<input class="nogroup" type="Radio" name="view" value="all"  checked>所有同事<br/>
						<input class="nogroup" type="Radio" name="view" value="me" >只有我能看见<br/>
						<input id="checkgroup" type="Radio" name="view" value="grouptype" >选择一个组...<br/>
							
							<div class="grouptype" style="display:none">
								<select name="grouptype" id="grouptype">
									<c:forEach items="${groupList }" var="list">
										<option value="${list.groupname }">${ list.groupname}</option>
									</c:forEach>
									</select>
							</div>
					</c:when>
					<c:when test="${contact.view == 'me' }">
						<input class="nogroup" type="Radio" name="view" value="all" >所有同事<br/>
						<input class="nogroup" type="Radio" name="view" value="me" checked>只有我能看见<br/>
						<input id="checkgroup" type="Radio" name="view" value="grouptype" >选择一个组...<br/>
							
							<div class="grouptype" style="display:none">
								<select name="grouptype" id="grouptype">
									<c:forEach items="${groupList }" var="list">
										<option value="${list.groupname }">${ list.groupname}</option>
									</c:forEach>
									</select>
							</div>
					</c:when>
					<c:when test="${contact.view != '' and contact.view != 'me' }">
						<input class="nogroup" type="Radio" name="view" value="all" >所有同事<br/>
						<input class="nogroup" type="Radio" name="view" value="me" >只有我能看见<br/>
						<input class="nogroup"  type="Radio" name="view" value="${contact.view }" checked>${contact.view }小组成员和创建者可见<br/>
						<input id="checkgroup" type="Radio" name="view" value="grouptype" >选择一个组...<br/>
							
							<div class="grouptype" style="display:none">
								<select name="grouptype" id="grouptype">
									<c:forEach items="${groupList }" var="list">
										<option value="${list.groupname }">${ list.groupname}</option>
									</c:forEach>
									</select>
							</div>
					</c:when>
				</c:choose>				
				
				 
			  </div> 
			</div>
			
			<div class="control-group">
			  <label class="control-label"></label>
			  <div class="controls">
				
				<button id="button2" class="btn btn-success" type="submit">
				  保存修改
				</button>
				<button id="button3" class="btn" type="submit">
				 <a href="updatecontact_back.action"> 取消</a>
				</button>
				
			  </div> 
			</div>
			  
			
		  </fieldset>
		</form>					
	</div>	
						
						
						
				  </div>
				  <div class="span4">
						<div class="page-header well">
							<h3>通讯录管理</h3>
							<table class="table">
							  <tbody>
								<tr>
								  <td><img src="../img/contacts.png" alt="" /><a href="addcontact.action">添加联系人</a></td>
								</tr>
								<tr>
								  <td><img src="../img/company.png" alt="" /><a href="addcompany.action">添加公司</a></td>
								</tr>
								<tr>
								  <td><img src="../img/company.png" alt="" /><a href="show_editcontact.action">修改联系对象</a></td>
								</tr>
								<tr>
								  <td><img src="../img/company.png" alt="" /><a href="show_delcontact.action">删除联系对象</a></td>
								</tr>
								
								<tr>
								  <td><img src="../img/export_to_document.png" alt="" />
											<a  data-toggle="modal" href="#myModal" >点击导入联系人</a>
	
												<div class="modal fade" id="myModal">
												  <div class="modal-header">
													<a class="close" data-dismiss="modal"><img src="../img/closebox.png"></a>
													<h3>您的联系人文件放入C盘import文件夹中了吗？</h3>
												  </div>
													 <form novalidate="novalidate" method="post" id="user-form" class="simple_form well" action="import_contact.action" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="y27zJQeqxEC1a5ndwzOvNh+/zsUoKoR8yeyGZRDmpus=" name="authenticity_token"></div>
												  <div class="modal-body">
													 
														  <div class="control-group email required"><div class="controls"><input type="text" value="" size="50" placeholder="要导入的联系人文件名" name="import_name" id="user_email" class="string email required span3"></div></div>
												  </div>
												  <div class="modal-footer">
													<input name="" class="btn btn-primary" type="submit" value="导入"/>
													<a href="#" class="btn"   data-dismiss="modal">取消</a>
												  </div>
														</form>
												</div>
	
								  </td>
								</tr>
								<tr>
								  <td><img src="../img/export.png" alt="" />
								  			
								  			<a  data-toggle="modal" href="#exportModal" >点击导出联系人</a>
	
												<div class="modal fade" id="exportModal">
												  <div class="modal-header">
													<a class="close" data-dismiss="modal"><img src="../img/closebox.png"></a>
													<h3>导出的联系人文件默认存在C盘export文件夹中！</h3>
												  </div>
													 <form novalidate="novalidate" method="post" id="user-form" class="simple_form well" action="export_contact.action" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="y27zJQeqxEC1a5ndwzOvNh+/zsUoKoR8yeyGZRDmpus=" name="authenticity_token"></div>
												  <div class="modal-body">
													 
														  <div class="control-group email required"><div class="controls"><input type="text" value="" size="50" placeholder="请给导出的联系人文件命名" name="export_name" id="user_email" class="string email required span4" style="height:30px;"></div></div>
												  </div>
												  <div class="modal-footer">
													<input name="" class="btn btn-primary" type="submit" value="导出"/>
													<a href="#" class="btn"   data-dismiss="modal">取消</a>
												  </div>
												</form>
												</div>
								  
								  </td>
								</tr>
							  </tbody>
							</table>
						</div>	
						
				  </div>
				</div>
			</div>
	
		
	<script type="text/javascript">
		$(document).ready(function(){
			
		
			$("#new_task").click(function(){
				$('#myModal').modal({
					backdrop:true,
					keyboard:true,
					show:false
				});
			});
		});
		
	
		$(document).ready(function(){
			
			
			$(".oldtelremove").click(function() {
				var div =  this.parentNode.parentNode;
				document.getElementById("tellist").removeChild(div);
			});
			$(".oldmailremove").click(function() {
				var div =  this.parentNode.parentNode;
				document.getElementById("maillist").removeChild(div);
			});
			$(".oldimremove").click(function() {
				var div =  this.parentNode.parentNode;
				document.getElementById("imlist").removeChild(div);
			});
			$(".oldwebsiteremove").click(function() {
				var div =  this.parentNode.parentNode;
				document.getElementById("websitelist").removeChild(div);
			});		
					
			$("#checkgroup").click(function(){
				$(".grouptype").show(500);
			});
			$(".nogroup").click(function(){
				$(".grouptype").hide(500);
			});
			
		
			$("#new_task").click(function(){
				$('#myModal').modal({
					backdrop:true,
					keyboard:true,
					show:false
				});
			});
			
			$(".addphone").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#contact_phone_list_company").append(div);
				$("<input type='text' size='30' name='tel' id='addphone' >").appendTo(div);
				var select = $("<select  id='telsort' name='teltype' style='width:90px'>");
				select.append("<option value='公司'>公司</option>");
				select.append("<option value='工作'>工作</option>");
				select.append("<option value='手机'>手机</option>");
				select.append("<option value='传真'>传真</option>");
				select.append("<option value='住宅'>住宅</option>");
				select.append("<option value='其它'>其它</option>");
				div.append(select);
				$("<span class='addremove'>&nbsp;&nbsp;<a class='remove' href='javascript:;' onclick='deltelphone(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addemail").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addemail").append(div);
				$("<input type='text' size='30' name='email' id='addmail' >").appendTo(div);
				var select = $("<select  id='telsort' name='emailtype' style='width:90px'>");
				select.append("<option value='公司'>公司</option>");
				select.append("<option value='工作'>工作</option>");
				select.append("<option value='手机'>手机</option>");
				select.append("<option value='传真'>传真</option>");
				select.append("<option value='住宅'>住宅</option>");
				select.append("<option value='其它'>其它</option>");
				div.append(select);
				$("<span class='addremove'>&nbsp;&nbsp;<a class='remove' href='javascript:;' onclick='deltelemail(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addim").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addim").append(div);
				$("<input type='text' size='30' name='im' id='addim' >").appendTo(div);
				var select = $("<select  id='telsort' name='imtype' style='width:90px'>");
				select.append("<option value='公司'>公司</option>");
				select.append("<option value='工作'>工作</option>");
				select.append("<option value='手机'>手机</option>");
				select.append("<option value='传真'>传真</option>");
				select.append("<option value='住宅'>住宅</option>");
				select.append("<option value='其它'>其它</option>");
				div.append(select);
				$("<span class='addremove'>&nbsp;&nbsp;<a class='remove' href='javascript:;' onclick='deltelim(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
			$(".addwebsite").click(function(){
				var div = $("<div class='contact_methods'></div>");
				$("#addwebsite").append(div);
				$("<input type='text' size='30' name='website' id='addwebsite' >").appendTo(div);
				var select = $("<select  id='telsort' name='websitetype' style='width:90px'>");
				select.append("<option value='公司'>公司</option>");
				select.append("<option value='工作'>工作</option>");
				select.append("<option value='手机'>手机</option>");
				select.append("<option value='传真'>传真</option>");
				select.append("<option value='住宅'>住宅</option>");
				select.append("<option value='其它'>其它</option>");
				div.append(select);
				$("<span class='addremove'>&nbsp;&nbsp;<a class='remove' href='javascript:;' onclick='deltelwebsite(this)'><img style='width:25px' src='img/clear.png'/></a></span>").appendTo(div);	
			});
			
		});
		
		
		
		function deltelphone(obj) {
			var div =  obj.parentNode.parentNode;
			document.getElementById("contact_phone_list_company").removeChild(div);
		}
		function deltelemail(obj) {
			var div =  obj.parentNode.parentNode;
			document.getElementById("addemail").removeChild(div);
		}
		function deltelim(obj) {
			var div =  obj.parentNode.parentNode;
			document.getElementById("addim").removeChild(div);
		}
		function deltelwebsite(obj) {
			var div =  obj.parentNode.parentNode;
			document.getElementById("addwebsite").removeChild(div);
		}
		
		
	</script>
</body>
</html>